<template>
  <div class="content">
    <h2>日志列表</h2>
    <div class="search-bar">
      <input v-model="searchQuery" type="text" placeholder="搜索文章..." />
      <el-button class="search-button" @click="filterPosts">搜索</el-button>
    </div>
    <div class="blog-list">
      <router-link :to="{ name: 'BlogDetail', params: { id: post.id } }" v-for="(post, index) in blogPosts" :key="post.id" class="blog-item" :class="{ 'even': (index + 1) % 2 === 0 }">
        <div class="blog-image">
          <img :src="post.viewImage" :alt="post.title" />
        </div>
        <div class="blog-content">
          <h3>{{ post.title }}</h3>
          <p class="date">{{ post.date }}</p>
          <div class="categories">
            分类:
            <span v-for="category in post.categoryList" :key="category.name" class="category" :style="{ backgroundColor: category.color }">
              {{ category.name }}
            </span>
          </div>
          <div class="tags">
            标签:
            <span v-for="tag in post.tagList" :key="tag.name" class="tag" :style="{ backgroundColor: tag.color }">
              {{ tag.name }}
            </span>
          </div>
          <div class="views">
            浏览数: {{ post.views }}
          </div>
          <div class="views">
            更新时间: {{ formatDate(post.updateTime) }}
          </div>
        </div>
      </router-link>
    </div>
    <div class="pagination">
      <el-pagination
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="articleTotal"
          layout="prev, pager, next"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, computed,onMounted,nextTick  } from "vue";
import { selectAllArticle, selectByArticleId, addViews} from '@/api/front/article.js'
import store from "@/store/index.js";
import {useRoute} from 'vue-router';

const route = useRoute();
const param = route.params;
console.log('param', param)
if (param.param === "tagId") {
  console.log(1)
  const tagId = route.query.tagId;
  console.log('Tag ID:', tagId);
} else if (param.param === 'categoryId') {
  console.log(2)
  const categoryId = route.query.categoryId;
  console.log('Category ID:', categoryId);
}

const searchQuery = ref('');
const articleTotal = ref(1);
const pageSize = ref(6);
const currentPage = ref(1);

const blogPosts = ref([
  {
    id: 1,
    title: '悉达多',
    date: '2024-07-18',
    viewImage: 'http://localhost:9090/files/viewImage1.jpg',
    updateTime: '2024-07-01 20:42:18',
    categoryList: [{ name: '哲学', color: '#FF5733' }],
    tagList: [{ name: '人生', color: '#33FF57' }, { name: '思考', color: '#3357FF' }],
    views: 200
  },
  {
    id: 2,
    title: '理想的生活',
    date: '2024-07-10',
    viewImage: 'http://localhost:9090/files/viewImage2.jpg',
    updateTime: '2024-07-01 20:42:18',
    categoryList: [{ name: '生活', color: '#FFC300' }],
    tagList: [{ name: '理想', color: '#DAF7A6' }, { name: '追求', color: '#FF5733' }],
    views: 200
  },
  {
    id: 2,
    title: '理想的生活',
    date: '2024-07-10',
    viewImage: 'http://localhost:9090/files/viewImage2.jpg',
    updateTime: '2024-07-01 20:42:18',
    categoryList: [{ name: '生活', color: '#FFC300' }],
    tagList: [{ name: '理想', color: '#DAF7A6' }, { name: '追求', color: '#FF5733' }],
    views: 200
  },
  {
    id: 2,
    title: '理想的生活',
    date: '2024-07-10',
    viewImage: 'http://localhost:9090/files/viewImage2.jpg',
    updateTime: '2024-07-01 20:42:18',
    categoryList: [{ name: '生活', color: '#FFC300' }],
    tagList: [{ name: '理想', color: '#DAF7A6' }, { name: '追求', color: '#FF5733' }],
    views: 200
  },
  {
    id: 2,
    title: '理想的生活',
    date: '2024-07-10',
    viewImage: 'http://localhost:9090/files/viewImage2.jpg',
    updateTime: '2024-07-01 20:42:18',
    categoryList: [{ name: '生活', color: '#FFC300' }],
    tagList: [{ name: '理想', color: '#DAF7A6' }, { name: '追求', color: '#FF5733' }],
    views: 200
  },
  {
    id: 2,
    title: '理想的生活',
    date: '2024-07-10',
    viewImage: 'http://localhost:9090/files/viewImage2.jpg',
    updateTime: '2024-07-01 20:42:18',
    categoryList: [{ name: '生活', color: '#FFC300' }],
    tagList: [{ name: '理想', color: '#DAF7A6' }, { name: '追求', color: '#FF5733' }],
    views: 200
  },
  // ... 其他文章数据
]);

const handlePageChange = (page) => {
  currentPage.value = page;
  selectAllArticle({pageNum: currentPage.value,pageSize: pageSize.value, title: searchQuery.value}).then(res => {
    blogPosts.value=res.data.data.list
    articleTotal.value = res.data.data.total
  })
};

const InitDate = async ()=>{
  const res = await selectAllArticle({pageSize: pageSize.value, pageNum: currentPage.value})
  blogPosts.value=res.data.data.list
  articleTotal.value=res.data.data.total
}


onMounted(async () => {
  InitDate()
})

const filterPosts = () => {
  selectAllArticle({pageNum: currentPage.value,pageSize: pageSize.value, title: searchQuery.value}).then(res => {
    blogPosts.value=res.data.data.list
    articleTotal.value = res.data.data.total
  })
};

const formatDate = (cellValue) => {
  console.log("cellValue",cellValue)
  if (cellValue) {
    const date = new Date(cellValue);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
  }
  return '';
}
</script>

<style scoped>
.content {
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  height: 30px;
  justify-content: space-around;
  margin-bottom: 20px;
}

.search-button {
  height: 30px;
  margin-left: 10px;
  line-height: 30px;
}

.search-bar input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .blog-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    color: #ccc;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .blog-content{
    color: #2c3e50;
  }


  .blog-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
}

/* 电脑端样式 */
@media (min-width: 769px) {
  .blog-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .blog-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background-color: #fff;
    border-radius: 8px;
    margin: 15px 0;
    color: #ccc;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .blog-item:hover{
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 稍微增加阴影效果 */
  }

  .blog-item {
    overflow: hidden; /* 确保放大的图片不会溢出容器 */
    transition: box-shadow 0.3s ease; /* 添加阴影过渡效果 */
  }

  .blog-content{
    color: #2c3e50;
  }

  .blog-image {
    overflow: hidden; /* 确保放大的图片不会溢出容器 */
  }

  .blog-image img {
    transition: transform 0.3s ease; /* 添加图片变换过渡效果 */
  }

  .blog-item:hover .blog-image img {
    transform: scale(1.05); /* 悬停时图片放大到1.05倍 */
  }

  .blog-item.even .blog-image {
    order: 2;
  }

  .blog-item.even .blog-content {
    order: 1;
  }

  .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}

.blog-content {
  padding: 20px;
}

.blog-content h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.blog-content .date {
  margin: 0 0 10px 0;
  color: #888;
  font-size: 14px;
}

.categories, .tags {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.category, .tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.views {
  font-size: 14px;
  color: #888;
}


</style>